<template>
	<view class="project">
		<block v-for="(item,index) in projectlist" :key="index">
			<view class="forproj" @click="toprojectlist(item.id)">
				<image class="proimg" :src="item.picture"></image>
				<projectItem :status="item.status"></projectItem>
			</view>
		</block>
		
	</view>
</template>

<script>
	import projectItem from '@/components/project-item/project-item.vue';
	import {common} from '@/common/publish.js';
	export default {
		components:{
			projectItem
		},
		data() {
			return {
				projectlist:[]
			};
		},
		onLoad() {
			this.getlist();
		},
		methods: {
			getlist:function(){
				uni.request({
					url: common.localurl+'/api/project/list.json', //仅为示例，并非真实接口地址。
					method:'GET',
					success: (res) => {
						if(res.data.length>0){
							this.projectlist = res.data
						}
					}
				});
			},
			toprojectlist:function(val){
				uni.navigateTo({
					url: '/pages/projectlist/projectlist?id='+val
				});
			}
		},
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	page{
		background:$bgcolor;
	}
	.project{
		padding:24upx;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap ;
		justify-content:space-between;
		align-items:flex-start;
	}
	.forproj{
		box-sizing:border-box;
		background: #fff;
		border-left: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
		border-top: 1px solid #e5e5e5;
		width:234upx;
		height:234upx;
		position:relative;
		margin-bottom:24upx;
	}
	.forproj:nth-child(3n) {
		border-right: 1px solid #e5e5e5;
	}
	.proimg{
		width:100%;
		height:100%;
		
	}
</style>
